<template>
    <div>
        <el-card class="head-card">
            <i class="el-icon-s-fold"></i><span style="font-size: 18px">大健康综合管理后台</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/category' }">商品系统</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/category'}">品类管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/categoryDetails' }"><strong>查看品类</strong></el-breadcrumb-item>
            </el-breadcrumb>
            <h1 style="color: #333744">查看品类</h1>
        </el-card>
        <el-card class="main-card box-card">
            <el-row>
                <el-col :span="3">
                    品类名称：
                </el-col>
                <el-col :span="8">
                    <span v-text="categoryDesc.categoryName"></span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    品类排序：
                </el-col>
                <el-col :span="8">
                    <span v-text="categoryDesc.sequence"></span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    子品类：
                </el-col>
                <el-col :span="18" >
                    <el-tag type="info"
                        v-for="children in categoryChildren"
                        v-text="children.categoryName">
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    品类描述：
                </el-col>
                <el-col :span="8">
                    <span v-text="categoryDesc.description"></span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" class="back">
                    <el-button type="primary" @click="reback">返回</el-button>
                </el-col>

            </el-row>
        </el-card>
    </div>
</template>

<script>
import category from "@/views/mallSystem/Category.vue";

export default {
    name: "CategoryDetails",
    computed: {
        category() {
            return category
        }
    },
    data(){
        return {
            //表格数据
            tableData: [],
            id: this.$route.params.id,
            //品类对象
            categoryDesc:{},
            //子品类
            categoryChildren:[]
        }
    },
    methods:{
        //详情
        loadCategory(){
            this.$axios.get(`/category/viewCategoryDetails?id=${this.id}`).then(resp => {
                if (resp.data.code==200){
                    this.categoryDesc = resp.data.data;
                    console.log("categoryDesc",this.categoryDesc)
                }
            });
        },
        //查询子品类
        findChildrenCategory(){
            this.$axios.get(`/category/getAllChildrenCategory?id=${this.id}`).then(resp => {
                if (resp.data.code==200){
                    this.categoryChildren = resp.data.data;
                    console.log("categoryChildren",this.categoryChildren)
                }
            });
        },
        reback(){
            this.$router.push({ path: '/category' });
        }

    },
    created() {
        console.log('CategoryID:', this.id);
        this.loadCategory();
        this.findChildrenCategory();
    }
}
</script>

<style scoped>
.head-card {
    text-align: left;
    padding-left: 18px;
    height: 160px;
    margin-bottom: 30px;
}

.el-icon-s-fold {
    font-size: 23px;
    margin-right: 10px;
    margin-bottom: 40px;
}
.el-row {
    margin-bottom: 20px;
}
.main-card{
    padding: 20px;
}
.el-table{
}
.el-tag{
    margin-right: 30px;
}
.el-col{
    text-align: left;
}
.back{
    margin-left: 12%;
}
</style>